<template>
	<view>
		<view class="top">
			<view class="dl">
				<view class="avatar">
					<u-avatar :src="userbase.avatarUrl" size="140rpx"></u-avatar>
				</view>
				<view class="user">
					<text>{{userbase.nick}}</text>
					<text :style="{display:userbase.id? 'block':'none'}">ID {{userbase.id}} | 成长值 {{userLevel.upgradeScore}} 段位 {{userLevel.name}}</text>
				</view>
			</view>
		</view>
		<view class="min">
			<u-row class="row">
				<u-col span="4">
					<view>
						<view class="num">{{this.score}}</view>
						<view class="word" @click="fn2">积分</view>
					</view>
				</u-col>
				<u-col span="4">
					<view>
						<view class="num">{{this.freeze}}</view>
						<view class="word" @click="fn5">优惠券</view>
					</view>
				</u-col>
				<u-col span="4">
					<view>
						<view class="num">{{this.balance}}</view>
						<view class="word">余额</view>
					</view>
				</u-col>
			</u-row>
			<u-row class="row" justify="space-between"
				customStyle="margin-bottom: 0rpx;border-radius: 20rpx 20rpx 0 0;border-bottom:3rpx solid #fcfdfd">
				<u-col span="3">
					<view class="mydd">我的订单</view>
				</u-col>
				<u-col span="4">
					<view class="dd">
						<u--text  @click="fn6" suffixIcon="arrow-right" iconStyle="font-size: 19px" text="查看全部订单"></u--text>
					</view>
				</u-col>
			</u-row>
			<u-row class="row" customStyle="border-radius: 0 0 20rpx 20rpx;">
				<u-col span="2.4">
					<view>
						<!-- <view class="num" icon="rmb-circle-fill">--</view> -->
						<u-icon class="num" labelPos="top" name="rmb-circle" size="30"></u-icon>
						<view class="word">待付款</view>
					</view>
				</u-col>
				<u-col span="2.4">
					<view >
						<!-- <view class="num">--</view> -->
						<u-badge  style="width: 6rpx; margin-left: 80px; margin-bottom: -25px; "  bgColor="red" max="99" :value="count_id_no_transfer"></u-badge>
						<u-icon  class="num" labelPos="top" name="red-packet-fill" size="35"></u-icon>
						<view class="word">待发货</view>
					</view>
				</u-col>
				<u-col span="2.4">
					<view>
						<!-- <view class="num">--</view> -->
						<u-icon class="num" labelPos="top" name="checkbox-mark" size="30"></u-icon>
						<view class="word">待收货</view>
					</view>
				</u-col>
				<u-col span="2.4">
					<view>
						<!-- <view class="num">--</view> -->
						<u-icon class="num" labelPos="top" name="heart-fill" size="30"></u-icon>
						<view class="word">评价</view>
					</view>
				</u-col>
				<u-col span="2.4">
					<view>
						<!-- <view class="num">--</view> -->
						<u-icon class="num" labelPos="top" name="heart" size="30"></u-icon>
						<view class="word">退款/售后</view>
					</view>
				</u-col>
			</u-row>
			<u-row class="row"
				customStyle="margin-bottom: 0rpx;border-radius: 20rpx 20rpx 0 0;border-bottom:3rpx solid #fcfdfd">
				<u-col span="3">
					<view class="mydd">常用功能</view>
				</u-col>
			</u-row>
			<u-row class="row" customStyle="margin-bottom: 0rpx;border-radius: 0;">
				<u-col span="3">
					<view>
						<u-icon class="num" labelPos="top" name="heart" size="30"></u-icon>
						<view class="word" @click="fn1" >我的钱包</view>
					</view>
				</u-col>
				<u-col span="3">
					<view>
						<u-icon class="num" labelPos="top" name="gift" size="30"></u-icon>
						<view class="word">兑换积分</view>
					</view>
				</u-col>
				<u-col span="3">
					<view>
						<u-icon class="num" labelPos="top" name="coupon" size="30"></u-icon>
						<view class="word">优惠券</view>
					</view>
				</u-col>
				<u-col span="3">
					<view>
						<u-icon class="num" labelPos="top" name="map" size="30"></u-icon>
						<view class="word" @click="fn4">收货地址</view>
					</view>
				</u-col>
			</u-row>
			<u-row class="row"
				customStyle="margin-bottom: 0rpx;border-radius: 0 0 20rpx 20rpx;border-bottom:3rpx solid #fcfdfd">
				<u-col span="3">
					<view>
						<!-- <view class="num">--</view> -->
						<u-icon class="num" labelPos="top" name="coupon" size="30"></u-icon>
						<view class="word" @click="fn7">设置</view>
					</view>
				</u-col>
				<u-col span="3">
					<view>
						<!-- <view class="num">--</view> -->
						<u-icon class="num" labelPos="top" name="thumb-up-fill" size="30"></u-icon>
						<view class="word">主题</view>
					</view>
				</u-col>
			</u-row>
			<view style="text-align: center;margin: 20rpx;">Copyright © 2019-2022 v-shop | v2 </view>
			<view style="text-align: center;">最后发布时间：202208161505 </view>
		</view>
	</view>
</template>

<script>
	import {
		_userdetail,
		_useramount,
		_orderstatistics,
		_discountsstatistics
	} from "../../api/mine.js"
	export default {
		data() {
			return {
				userbase: {
					nick: "登录/注册",
					id: "",
				},
				userLevel:{
					upgradeScore:"",
					name:""
				},
				score:"--",
				freeze:"--",
				balance:"--",
				value:"count_id_no_transfer",
				count_id_no_transfer:""
			}
		},
		methods: {
			// 查看用户详情
			get_userdetail() {
				_userdetail().then(res => {
					this.userbase = res.data.base
					this.userLevel=res.data.userLevel
					// console.log(res);
				})
			},
			fn1(){
				uni.navigateTo({
					url:"/pages/wallet/wallet"
				})
			},
			fn2(){
				uni.navigateTo({
					url:"/pages/integral/integral"
				})
			},
			fn4(){
				uni.navigateTo({
					url:"/pages/address/address"
				})
			},
			fn5(){
				uni.navigateTo({
					url:"/pages/coupon/coupon"
				})
			},
			fn6(){
				uni.navigateTo({
					url:"/pages/order/order"
				})
			},
			fn7(){
				uni.navigateTo({
					url:"/pages/theme/theme"
				})
			},
			// 查看用户资产
			get_useramount(){
				_useramount().then(res=>{
					console.log(res,333)
					this.score=res.data.score
					this.freeze=res.data.freeze
					this.balance=res.data.balance
				})
			},
			// 订单统计
			get_orderstatistics(){
				_orderstatistics().then(res=>{
					console.log(res,1111)
					this.count_id_no_transfer=res.data.count_id_no_transfer
				})
			},
			// 优惠券统计
			get_discountsstatistics(){
				_discountsstatistics().then(res=>{
					console.log(res,1111111111222)
				})
			}
			
			
		},
		onReady() {
			this.get_userdetail(),
			this.get_useramount(),
			this.get_orderstatistics(),
			this.get_discountsstatistics()
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		background-color: #1ba784;
		padding: 60rpx 0 160rpx 0;

		.dl {
			height: 140rpx;
			line-height: 140rpx;
			color: white;

			.avatar {
				width: 140rpx;
				height: 140rpx;
				float: left;
				margin: 0 20rpx 0 30rpx;
			}

			.user {
				width: 400rpx;
				height: 140rpx;
				line-height: 140rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}

			.user>text {
				font-size: 40rpx;
				width: 390rpx;
				height: 70rpx;
				line-height: 70rpx;
			}

			.user>text:nth-child(2) {
				font-size: 24rpx;
			}
		}
	}

	.min {
		padding: 30rpx;
		background-color: #f7f8fa;

		.row {
			background-color: white;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.num {
				text-align: center;
				font-size: 32rpx;
				font-weight: 800;
				margin: 10rpx 0;
			}
			
			.word {
				text-align: center;
				font-size: 24rpx;
				margin-bottom: 20rpx;
			}

			.mydd {
				font-size: 28rpx;
				font-weight: 800;
				text-align: center;
				margin: 20rpx 0;
			}

			.dd {
				font-size: 24rpx;
				color: #969799;
				justify-content: baseline;
			}
		}
	}
</style>
